<script setup lang="ts">
import { computed, reactive, watch } from "vue";
import type { PageParams } from "@/types/subCategoryTypes/subCategoryTypes.ts";

interface Emits {
   (e: "changeSort", sortParams:PageParams): void;
}

const emits = defineEmits<Emits>();
/*排序参数*/
const sortParams = reactive<PageParams>({
   // 是否有库存
   inventory: false,
   // 是否只显示特惠
   onlyDiscount: false,
   // 排序字段，取值范围：publishTime(最新商品)、orderNum(最高人气)、price(价格)、evaluateNum(评论最多)
   sortField: null,
   // 排序规则，asc为正序，desc为倒序，默认为desc
   sortMethod: null,
});
/*是否为默认排序*/
const isDefault = computed(() => sortParams.sortField === null);
/*是否为最新商品排序*/
const isPublishTime = computed(() => sortParams.sortField === "publishTime");
/*是否为最高人气排序*/
const isOrderNum = computed(() => sortParams.sortField === "orderNum");
/*是否为评论最多排序*/
const isEvaluateNum = computed(() => sortParams.sortField === "evaluateNum");
/*是否为正序*/
const isUp = computed(() => sortParams.sortMethod === "asc");
/*是否为倒序*/
const isDown = computed(() => sortParams.sortMethod === "desc");

/*修改排序参数的回调函数*/
const changeSortParams = (field: string) => {
   if (field === "price") {
      sortParams.sortField = field;
      if (sortParams.sortMethod === null) {
         sortParams.sortMethod = "desc";
      } else {
         sortParams.sortMethod = sortParams.sortMethod === "desc" ? "asc" : "desc";
      }
   } else {
      if (sortParams.sortField===field) return
      sortParams.sortField = field;
      sortParams.sortMethod = null;
   }
};
/*监听排序参数的变化*/
watch(sortParams, (newValue: PageParams) => {
   emits("changeSort", newValue);
});
</script>

<template>
   <div class="sub-sort">
      <div class="sort">
         <a :class="{active:isDefault}" @click="changeSortParams(null)">默认排序</a>
         <a :class="{active:isPublishTime}" @click="changeSortParams('publishTime')">最新商品</a>
         <a :class="{active:isOrderNum}" @click="changeSortParams('orderNum')">最高人气</a>
         <a :class="{active:isEvaluateNum}" @click="changeSortParams('evaluateNum')">评论最多</a>
         <a @click="changeSortParams('price')">
            <i>价格排序</i>
            <i class="arrow up" :class="{active:isUp}"></i>
            <i class="arrow down" :class="{active:isDown}"></i>
         </a>
      </div>
      <div class="check">
         <Checkbox v-model="sortParams.inventory">仅显示有货商品</Checkbox>
         <Checkbox v-model="sortParams.onlyDiscount">仅显示特惠商品</Checkbox>
      </div>
   </div>
</template>

<style scoped lang="less">
.sub-sort {
   height: 80px;
   display: flex;
   align-items: center;
   justify-content: space-between;

   .sort {
      display: flex;

      a {
         height: 30px;
         line-height: 28px;
         border: 1px solid #e4e4e4;
         padding: 0 20px;
         margin-right: 20px;
         color: #999;
         border-radius: 2px;
         position: relative;
         transition: all .3s;

         &.active {
            background: @xtxColor;
            border-color: @xtxColor;
            color: #fff;
         }

         .arrow {
            position: absolute;
            border: 5px solid transparent;
            right: 8px;

            &.up {
               top: 3px;
               border-bottom-color: #bbb;

               &.active {
                  border-bottom-color: @xtxColor;
               }
            }

            &.down {
               top: 15px;
               border-top-color: #bbb;

               &.active {
                  border-top-color: @xtxColor;
               }
            }
         }
      }
   }

   .check {
      .checkbox {
         margin-left: 20px;
         color: #999;
      }
   }
}
</style>
